<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            padding-bottom: 70px;
            background-color: #f5f5f5;
        }
        .story-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid #ff2d55;
            padding: 2px;
        }
        .story-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
        .content-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        .content-card img {
            object-fit: cover;
        }
        .task-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            background-color: white;
            border: 1px solid #eee;
        }
        .section-container {
            background-color: white;
            margin-bottom: 10px;
            padding: 15px;
            border-radius: 0;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #e5e7eb;
            display: flex;
            height: 60px;
            z-index: 100;
        }
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            font-size: 10px;
        }
        .nav-item.active {
            color: #ec4899;
        }
        .nav-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        .feature-card {
            background-color: white;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        .feature-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #fdf2f8;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ec4899;
            font-size: 24px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="sticky top-0 bg-white z-10">
        <div class="flex justify-between items-center px-4 py-3">
            <h1 class="text-xl font-bold">游戏社交</h1>
            <div class="flex">
                <button class="mr-4"><i class="fas fa-search text-gray-600"></i></button>
                <button><i class="fas fa-bell text-gray-600"></i></button>
            </div>
        </div>
        
        <!-- 分类导航 -->
        <div class="flex px-4 py-2 overflow-x-auto whitespace-nowrap bg-white border-b">
            <div class="px-3 py-1 mr-2 bg-pink-500 text-white rounded-full text-sm">推荐</div>
            <div class="px-3 py-1 mr-2 bg-gray-100 text-gray-700 rounded-full text-sm">MOBA</div>
            <div class="px-3 py-1 mr-2 bg-gray-100 text-gray-700 rounded-full text-sm">射击</div>
            <div class="px-3 py-1 mr-2 bg-gray-100 text-gray-700 rounded-full text-sm">RPG</div>
            <div class="px-3 py-1 mr-2 bg-gray-100 text-gray-700 rounded-full text-sm">卡牌</div>
            <a href="game_list.html" class="px-3 py-1 mr-2 bg-gray-100 text-gray-700 rounded-full text-sm">更多</a>
        </div>
    </div>
    
    <!-- 功能入口 -->
    <div class="grid grid-cols-4 gap-3 p-4">
        <a href="task_room.html" class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-tasks"></i>
            </div>
            <span class="text-xs font-medium">任务房</span>
        </a>
        <a href="game_market.html" class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-gamepad"></i>
            </div>
            <span class="text-xs font-medium">游戏市场</span>
        </a>
        <a href="account_trade.html" class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-exchange-alt"></i>
            </div>
            <span class="text-xs font-medium">账号交易</span>
        </a>
        <a href="team_match.html" class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-users"></i>
            </div>
            <span class="text-xs font-medium">组队匹配</span>
        </a>
    </div>
    
    <!-- 故事/动态 -->
    <div class="px-4 py-3 bg-white mb-2">
        <div class="flex overflow-x-auto whitespace-nowrap pb-2">
            <div class="flex flex-col items-center mr-4">
                <div class="story-avatar mb-1">
                    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="用户头像">
                </div>
                <span class="text-xs">小王</span>
            </div>
            <div class="flex flex-col items-center mr-4">
                <div class="story-avatar mb-1">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="用户头像">
                </div>
                <span class="text-xs">小红</span>
            </div>
            <div class="flex flex-col items-center mr-4">
                <div class="story-avatar mb-1">
                    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="用户头像">
                </div>
                <span class="text-xs">小李</span>
            </div>
            <div class="flex flex-col items-center mr-4">
                <div class="story-avatar mb-1">
                    <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="用户头像">
                </div>
                <span class="text-xs">小张</span>
            </div>
            <div class="flex flex-col items-center mr-4">
                <div class="story-avatar mb-1">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="用户头像">
                </div>
                <span class="text-xs">小美</span>
            </div>
        </div>
    </div>
    
    <!-- 热门任务房 -->
    <div class="section-container">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-base font-bold">热门任务房</h2>
            <a href="task_room.html" class="text-sm text-gray-500">查看全部</a>
        </div>
        
        <div class="grid gap-3">
            <a href="task_room_detail.html" class="task-card p-3">
                <div class="flex justify-between items-start mb-2">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1534423861386-85a16f5d13fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-10 h-10 rounded-lg mr-2">
                        <div>
                            <h3 class="text-sm font-bold">王者荣耀撞车房</h3>
                            <div class="flex mt-1">
                                <span class="text-xs bg-gray-100 text-gray-600 px-1 rounded mr-1">排位</span>
                                <span class="text-xs bg-gray-100 text-gray-600 px-1 rounded mr-1">钻石+</span>
                                <span class="text-xs bg-gray-100 text-gray-600 px-1 rounded">3/5人</span>
                            </div>
                        </div>
                    </div>
                    <span class="bg-green-500 text-white text-xs px-2 py-1 rounded">进行中</span>
                </div>
                <p class="text-xs text-gray-600 mb-2">寻找钻石以上玩家一起排位，互相完成任务，冲星耀~</p>
                <button class="bg-pink-500 text-white text-xs px-3 py-1 rounded-full w-full">加入任务房</button>
            </a>
        </div>
    </div>
    
    <!-- 热门任务 -->
    <div class="section-container">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-base font-bold">热门任务</h2>
            <a href="task_list.html" class="text-sm text-gray-500">查看全部</a>
        </div>
        
        <div class="grid gap-3" style="grid-template-columns: repeat(2, minmax(0, 1fr));">
            <a href="task_detail.html" class="task-card p-3 mb-2">
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1534423861386-85a16f5d13fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-10 h-10 rounded-lg mr-2">
                    <div>
                        <h3 class="text-sm font-bold">王者荣耀代练</h3>
                        <p class="text-xs text-gray-500">钻石→星耀</p>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-pink-500 font-bold">¥120</span>
                    <button class="bg-pink-500 text-white text-xs px-3 py-1 rounded-full">接单</button>
                </div>
            </a>
            
            <a href="task_detail.html" class="task-card p-3">
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-10 h-10 rounded-lg mr-2">
                    <div>
                        <h3 class="text-sm font-bold">英雄联盟陪玩</h3>
                        <p class="text-xs text-gray-500">2小时</p>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-pink-500 font-bold">¥80</span>
                    <button class="bg-pink-500 text-white text-xs px-3 py-1 rounded-full">接单</button>
                </div>
            </a>
        </div>
    </div>
    
    <!-- 精选内容 -->
    <div class="section-container">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-base font-bold">精选内容</h2>
            <a href="content_list.html" class="text-sm text-gray-500">查看全部</a>
        </div>
        
        <div class="grid gap-3">
            <a href="content_detail.html" class="block">
                <div class="content-card bg-white mb-2">
                    <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="内容图片" class="w-full h-48 object-cover">
                    <div class="p-3">
                        <div class="flex items-center mb-2">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="用户头像" class="w-8 h-8 rounded-full mr-2">
                            <span class="text-sm font-medium">游戏达人</span>
                        </div>
                        <h3 class="text-base font-bold mb-1">英雄联盟S13总决赛精彩回顾</h3>
                        <p class="text-sm text-gray-600 mb-2">今年的总决赛真是太精彩了，让我们一起回顾那些激动人心的时刻...</p>
                        <div class="flex justify-between text-gray-500 text-sm">
                            <div class="flex items-center">
                                <i class="far fa-heart mr-1"></i>
                                <span>1.2k</span>
                            </div>
                            <div class="flex items-center">
                                <i class="far fa-comment mr-1"></i>
                                <span>328</span>
                            </div>
                            <div class="flex items-center">
                                <i class="far fa-bookmark"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    
    <!-- 热门游戏 -->
    <div class="section-container">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-base font-bold">热门游戏</h2>
            <a href="game_list.html" class="text-sm text-gray-500">查看全部</a>
        </div>
        
        <div class="grid grid-cols-4 gap-2">
            <a href="game_detail.html" class="text-center">
                <img src="https://images.unsplash.com/photo-1534423861386-85a16f5d13fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-14 h-14 rounded-lg mx-auto mb-1">
                <span class="text-xs">王者荣耀</span>
            </a>
            <a href="game_detail.html" class="text-center">
                <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-14 h-14 rounded-lg mx-auto mb-1">
                <span class="text-xs">英雄联盟</span>
            </a>
            <a href="game_detail.html" class="text-center">
                <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-14 h-14 rounded-lg mx-auto mb-1">
                <span class="text-xs">和平精英</span>
            </a>
            <a href="game_detail.html" class="text-center">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-14 h-14 rounded-lg mx-auto mb-1">
                <span class="text-xs">原神</span>
            </a>
        </div>
    </div>
    
    <!-- 热门账号 -->
    <div class="section-container">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-base font-bold">热门账号</h2>
            <a href="account_list.html" class="text-sm text-gray-500">查看全部</a>
        </div>
        
        <div class="grid grid-cols-2 gap-3">
            <a href="account_detail.html" class="task-card p-3">
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1534423861386-85a16f5d13fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-10 h-10 rounded-lg mr-2">
                    <div>
                        <h3 class="text-sm font-bold">王者荣耀账号</h3>
                        <p class="text-xs text-gray-500">荣耀王者 | 全英雄</p>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-pink-500 font-bold">¥1200</span>
                    <button class="bg-pink-500 text-white text-xs px-3 py-1 rounded-full">查看</button>
                </div>
            </a>
            
            <a href="account_detail.html" class="task-card p-3">
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="游戏图标" class="w-10 h-10 rounded-lg mr-2">
                    <div>
                        <h3 class="text-sm font-bold">原神账号</h3>
                        <p class="text-xs text-gray-500">AR60 | 全五星</p>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-pink-500 font-bold">¥3500</span>
                    <button class="bg-pink-500 text-white text-xs px-3 py-1 rounded-full">查看</button>
                </div>
            </a>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="bottom-nav">
        <a href="home.html" class="nav-item active">
            <div class="nav-icon"><i class="fas fa-home"></i></div>
            <div>首页</div>
        </a>
        <a href="task_room.html" class="nav-item">
            <div class="nav-icon"><i class="fas fa-tasks"></i></div>
            <div>任务房</div>
        </a>
        <a href="game_market.html" class="nav-item">
            <div class="nav-icon"><i class="fas fa-gamepad"></i></div>
            <div>游戏市场</div>
        </a>
        <a href="message.html" class="nav-item">
            <div class="nav-icon"><i class="fas fa-comment"></i></div>
            <div>消息</div>
        </a>
        <a href="profile.html" class="nav-item">
            <div class="nav-icon"><i class="fas fa-user"></i></div>
            <div>我的</div>
        </a>
    </div>
    
    <!-- 引入通用页面脚本 -->
    <script src="page-script.js"></script>
</body>
</html> 